<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-圆形</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="500" style="border: 1px solid;"></canvas>
</body>
<script>

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');

    /** 1. 绘制轮廓 */
    cxt.strokeStyle="#4fff51"

   // cxt.beginPath();
    cxt.arc(170,118,15,0,Math.PI,false);// x,y,r,起始角度，结束角度，顺时针
    cxt.closePath();

    cxt.stroke();

    /** 2.填充*/
    cxt.fillStyle = "#ff6bb8"

  //  cxt.beginPath();
    cxt.arc(70, 18, 15, 0, Math.PI, false);// x,y,r,起始角度，结束角度，顺时针
    cxt.closePath();

    cxt.fill();


</script>
</html>